
.v-line{
  border-left: #ff4aff solid 1px;
  width: 1px;
}
.h-line{
  border-top: #ff4aff solid 1px;
  height: 1px;
}
.v-middle-line,.h-middle-line{
  border-color: red;
}

.editor-grip-w ,.editor-grip-e{
  cursor: image-set(url(/static/hengxiang.svg) 2x, url(/static/hengxiang.svg) 1x) 16 16, sw-resize
}
.editor-grip-n ,.editor-grip-s{
  cursor: image-set(url(/static/shuxiang.svg) 2x, url(/static/shuxiang.svg) 1x) 16 16, ew-resize
}
.editor-grip-ne ,.editor-grip-sw{
  cursor: image-set(url(/static/xie-45.svg) 2x, url(/static/xie-45.svg) 1x) 16 16, ew-resize
}
.editor-grip-nw ,.editor-grip-se{
  cursor: image-set(url(/static/xie45.svg) 2x, url(/static/xie45.svg) 1x) 16 16, ew-resize
}

.editor-transform:hover {
  cursor: move;
}

.editor-transform .editor-grip b {
  display: block;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(rgba(0, 0, 0, 0.2))
}
.editor-transform .editor-grip-ne,.editor-transform .editor-grip-se,.editor-transform .editor-grip-sw,.editor-transform .editor-grip-nw,.editor-transform .editor-grip-round {
  z-index: 6
}

.editor-transform .editor-grip-ne b,.editor-transform .editor-grip-se b,.editor-transform .editor-grip-sw b,.editor-transform .editor-grip-nw b,.editor-transform .editor-grip-round b {
  width: 10px;
  height: 10px;
  border-radius: 50%
}
.editor-transform .editor-grip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 11px;
  transform: translate(-50%,-50%)
}

.editor-transform .editor-grip-w b,.editor-transform .editor-grip-e b {
  width: 6px;
  height: 16px
}

.editor-transform .editor-grip-s b,.editor-transform .editor-grip-n b {
  width: 16px;
  height: 6px
}

.editor-transform{
  pointer-events: painted;
  z-index: 5;
  transform: translate();
  .editor-grip{
    position: absolute;
  }

  .editor-grip-nw {
    margin-top: -1px;
    margin-left: -1px
  }

  .editor-grip-n {
    left: 50%;
    margin-top: -1px
  }

  .editor-grip-ne {
    left: 100%;
    margin-top: -1px;
    margin-left: 1px
  }

  .editor-grip-e {
    top: 50%;
    left: 100%;
    margin-left: 1px
  }

  .editor-grip-se {
    top: 100%;
    left: 100%;
    margin-top: 1px;
    margin-left: 1px
  }

  .editor-grip-s {
    top: 100%;
    left: 50%;
    margin-top: 1px
  }

  .editor-grip-sw {
    top: 100%;
    margin-top: 1px;
    margin-left: -1px
  }

  .editor-grip-w {
    top: 50%;
    left: 0;
    margin-left: -1px
  }

}

.editor-transform:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  margin: -2px 0 0 -2px;
  border: 2px solid rgba(77, 124, 255, 1);
  content: ""
}


.editor-transform .editor-rotator {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 4;
  margin: 14px 0 0 -11px;
  cursor: image-set(url(/static/xuanzhuan.png) 2x, url(/static/xuanzhuan.png) 1x) 16 16, ew-resize
}

.editor-transform .editor-rotator b {
  display: inline-block;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='rgba(0, 0, 0, 0)' xmlns='http://www.w3.org/2000/svg'%3E %3Ccircle cx='11' cy='11' r='10' fill='white'/%3E %3Ccircle cx='11' cy='11' r='10.5' stroke='black' stroke-opacity='0.2'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.66667 5.14868C6.99468 5.75499 5 8.14455 5 11C5 13.8555 6.99468 16.245 9.66667 16.8513V15.8203C7.55254 15.2368 6 13.2997 6 11C6 8.70032 7.55254 6.76325 9.66667 6.17975V5.14868ZM12.3333 15.8203C14.4475 15.2368 16 13.2997 16 11C16 8.70032 14.4475 6.76325 12.3333 6.17975V5.14868C15.0053 5.75499 17 8.14455 17 11C17 13.8555 15.0053 16.245 12.3333 16.8513V15.8203Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.16667 5.5H6.33333V4.5H10.1667V8.33333H9.16667V5.5Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8333 16.5H15.6667V17.5H11.8333L11.8333 13.6667L12.8333 13.6667L12.8333 16.5Z' fill='black'/%3E %3C/svg%3E");
  position: relative;
  z-index: 2;
  display: block;
  width: 22px;
  height: 22px;
  background-size: 100% 100%
}

.editor-transform .editor-rotator b span {
  position: absolute;
  top: 40px;
  left: 50%;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  color: #fff;
  background: #0e1217;
  border-radius: 4px;
  transform: translate(-50%)
}

.editor-transform .editor-rotator-three {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 6;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-left: -14px;
  background-color: #3a3a3a;
  border-radius: 50%
}

.editor-transform .editor-rotator-three b {
  display: inline-block;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg' fill='%23757575'%3E%3Cpath d='M16.683 4.305l2.856.766-6.05 5.624L11.81 3l2.84.76C16.13 1.367 17.96 0 20 0c3.819 0 6.877 4.845 8.236 11.764C35.156 13.124 40 16.18 40 20c0 3.787-4.722 6.846-11.763 8.231C26.878 35.153 23.82 40 20 40c-3.82 0-6.877-4.846-8.237-11.766C4.79 26.867 0 23.802 0 20c0-5.207 9.008-9 20-9 2.128 0 4.182.142 6.11.41C24.872 5.79 22.497 2 20 2c-1.11 0-2.263.788-3.317 2.305zM17 26.84V24l6.999 4.389L17 32v-3.162l-.883-.002a42.797 42.797 0 0 1-2.228-.248C15.127 34.21 17.502 38 20 38c3.63 0 7-8.005 7-18 0-2.297-.178-4.49-.496-6.504A41.86 41.86 0 0 0 20 13c-2.299 0-4.492.178-6.507.497A41.996 41.996 0 0 0 13 20c0 2.301.179 4.497.498 6.514.869.136 1.772.246 2.704.326H17zm11.59-12.95c.268 1.928.41 3.982.41 6.11a44.7 44.7 0 0 1-.41 6.114C34.354 24.843 38 22.396 38 20c0-2.497-3.79-4.872-9.41-6.11zM11.41 26.12A44.696 44.696 0 0 1 11 20c0-2.101.14-4.157.413-6.111C5.79 15.127 2 17.502 2 20c0 2.453 3.752 4.872 9.41 6.121z' fill='%23FFF'/%3E%3C/svg%3E");
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px
}

.align-line:before{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  margin: -2px 0 0 -2px;
  content: "";
  border: 1px dashed #5295ef;
}

.editor-mouse-tips {
  position: absolute;
  z-index: 8;
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 28px;
  color: #fff;
  white-space: nowrap;
  background: #0e1217;
  border-radius: 4px;
  -webkit-user-select: none;
  user-select: none
}
